<template>
  <div>
    <a-row :gutter="24" v-if="userInfo.type ===1">
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="企业数量" :total="otherObj.enterpriseNumber">
        </chart-card>
      </a-col>
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="签约即将到期" :total="otherObj.expiringNumber">
        </chart-card>
      </a-col>
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="已禁用" :total="otherObj.disabledNumber">
        </chart-card>
      </a-col>
      <a-col :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card title="已到期" :total="otherObj.expiredNumber">
        </chart-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" v-if="userInfo.type ===3">
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card title="关联企业数量" :total="otherObj.count">
        </chart-card>
      </a-col>
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card title="签约即将到期" :total="otherObj.expiringNumber">
        </chart-card>
      </a-col>
      <a-col :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card title="签约已到期" :total="otherObj.expiredNumber">
        </chart-card>
      </a-col>
    </a-row>
    <div class="warpper-boxs">
      <form-create v-model="params.fApi" :rule="params.rule" :option="params.option" @btn-search-click="loadTable(true)"
        @btn-reset-click="reset" />
      <a-button type="danger" v-action:enterpriseAddBtn @click="add(true)" icon="plus">新增</a-button>
      <a-table :columns="table.columns" :pagination="table.pagination" @change="handleTableChange" rowKey="id"
        :scroll="{ x: 2600 }" :data-source="table.loadData">
        <span slot="status" slot-scope="text, record">
          <a-popconfirm :title="record.status === 1 ? '禁用状态，账号不能使用？确认禁用！':'确认启用！'" ok-text="确认" cancel-text="取消"
            @confirm="handelUserStatusChange(record)">
            <a-switch checked-children="启用" un-checked-children="禁用" :checked="record.status === 1 ? true : false"
              default-checked />
          </a-popconfirm>
        </span>
        <span slot="action" slot-scope="text, record">
          <a v-action:enterpriseDetailBtn @click="queryEnterpriseDetail(record)">详情</a>
          <a-divider v-action:enterpriseEditBtn type="vertical" />
          <a @click="add(record)" v-action:enterpriseEditBtn>查看与编辑</a>
          <a-divider v-action:enterprisePermissionBtn type="vertical" />
          <a href="#" v-action:enterprisePermissionBtn @click="$refs.adminList.openAdmin(record)">分配管理员</a>
        </span>
        <span slot="agreement" slot-scope="text,record">
          <a-button type="link" @click="priwre(record)">预览</a-button>
        </span>
        <span slot="fees" slot-scope="text,record">
          <div v-for="(item,index) in record.fees" :key="index">
            【{{item.amountStart}} {{item.operator}} {{item.amountEnd}}】{{item.serviceRatio}}%
          </div>
        </span>
        <span slot="aliPayAmountBiggestLimit" slot-scope="text,record">
          <div v-if="record.aliPayAmountBiggestLimit">支付宝：{{record.aliPayAmountBiggestLimit}}</div>
          <div v-if="record.cmbAmountBiggestLimit">招行：{{record.cmbAmountBiggestLimit}}</div>
        </span>
      </a-table>
      <sys-enterprise-form ref="createForm" @ok="formSubmit" />
      <sys-admin-list ref="adminList" />
      <enterprise-detail ref="enterpriseDetail" />
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import store from '@/store'
  import md5 from 'md5'
  import {
    ChartCard
  } from '@/components'
  import SysEnterpriseForm from './modules/sys_enterprise_form'
  import SysAdminList from './modules/sys_admin_list'
  import EnterpriseDetail from './modules/enterprise_detail'
  import {
    getSysEnterpriseList,
    getSysEnterpriseDetails,
    getSysEnterpriseEnable
  } from '@/api/manage/enterprise'
  import {
    parkIdGetEnterpriseList
  } from '@/api/manage/park'
  import {
    PARAMS_ENTERPRISE,
    COLUMNS_SYS_ENTERPRISE,
    COLUMNS_PARK_ENTERPRISE,
    OPTION_BLOCK,
    OPTION_INLINE
  } from './modules/form'
  import {
    previewFile
  } from '@/utils/util'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'enterprise',
    components: {
      ChartCard,
      SysEnterpriseForm,
      SysAdminList,
      EnterpriseDetail
    },
    data() {
      return {
        params: {
          fApi: {},
          rule: PARAMS_ENTERPRISE,
          option: OPTION_INLINE
        },
        table: {
          columns: COLUMNS_SYS_ENTERPRISE,
          loadData: [],
          pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
            showSizeChanger: true,
					showQuickJumper: true,
            pageSizeOptions: ["10", "20", "50", "100"],
            showTotal: total => `共有 ${total} 条数据`,
          }
        },
        otherObj: {
          enterpriseNumber: 0,
          expiringNumber: 0,
          disabledNumber: 0,
          expiredNumber: 0,
          count: 0,
          expiredNumber: 0,
          expiringNumber: 0
        }
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    mounted() {
      this.initData();
    },
    methods: {
      initData() {
        this.$nextTick(() => {
          if (this.userInfo.type === 1) {
            this.params.fApi.hidden(false, 'add');
          } else {
            this.params.fApi.hidden(true, 'add');
          }
        })
        if (this.userInfo.type === 3) {
          this.table.columns = COLUMNS_PARK_ENTERPRISE
        } else if (this.userInfo.type === 1) {
          this.table.columns = COLUMNS_SYS_ENTERPRISE
        }
        this.loadTable(true);
      },
      async loadTable(flag) {
        let params = {};
        if (JSON.stringify(this.params.fApi) !== "{}") {
          if (this.userInfo.type === 3) {
            params.name = this.params.fApi.getValue('enterpriseName');
          } else {
            params.enterpriseName = this.params.fApi.getValue('enterpriseName');
          }
          params.contact = this.params.fApi.getValue('contact');
          params.contactPhone = this.params.fApi.getValue('contactPhone');
        }
        if (flag) {
          this.table.pagination.current = 1;
          this.table.pagination.pageSize = 10;
        }
        if (this.userInfo.type === 3) {
          params.parkId = this.userInfo.relationId;
        }
        params.pageNum = this.table.pagination.current;
        params.pageSize = this.table.pagination.pageSize;
        if (this.userInfo.type === 3) {
          const res = await parkIdGetEnterpriseList(params);
          if (res.code === '1') {
            this.table.loadData = res.data;
            this.table.pagination.total = res.data.total || 0;
            for (var keys in res) {
              this.otherObj[keys] = res[keys];
            }
          }
        } else if (this.userInfo.type === 1) {
          const res = await getSysEnterpriseList(params);
          if (res.code === '1') {
            this.table.loadData = res.data.content;
            this.table.pagination.total = res.data.total || 0;
            for (var keys in res) {
              this.otherObj[keys] = res[keys];
            }
          }
        }
      },
      handleTableChange(pagination) {
        this.table.pagination.current = pagination.current;
        this.table.pagination.pageSize = pagination.pageSize;
        this.loadTable(false);
      },
      async handelUserStatusChange(el) {
        let parmas = {};
        parmas.status = el.status === 1 ? 2 : 1;
        parmas.id = el.id;
        const {
          code
        } = await getSysEnterpriseEnable(parmas);
        if (code === '1') {
          this.$message.success('操作成功');
          this.loadTable(false);
        }
      },
      async add(rows) {
        if (rows === true) {
          this.$refs.createForm.add(true)
        } else {
          const {
            code,
            data
          } = await getSysEnterpriseDetails(rows.id);
          if (code === '1') {
            this.$refs.createForm.add(data)
          }
        }
      },
      queryEnterpriseDetail(rows) {
        this.$refs.enterpriseDetail.add(rows);
      },
      priwre(rows) {
        previewFile(rows.agreement);
      },
      formSubmit() {
        this.$message.success('操作成功');
        this.loadTable(true);
      },
      reset() {
        this.params.fApi.resetFields();
        this.loadTable(true);
      }
    }
  }
</script>
